import React,{useState,useEffect} from 'react';
import {Text, View, StyleSheet, TouchableOpacity, FlatList,Image} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import screen from '../../utils/screen';
import Images from '../../images/images';
import LinkButton from '../../components/linkButton';
import {useLoading} from '../../components/loading/useLoading';
import {useToast} from '../../components/toast/useToast';
import {useModal} from '../../components/useModal';
import SearchDevice from './searchDevice';
import Container from '../../components/Container';
import BleUtil from '../../utils/bleUtil';
import {useAppStore} from '../../store/useAppStore';

const addDeviceScale = 1336 / 666

const ConnectDevice = ()=>{

    const navigation = useNavigation()
    const route = useRoute()
    const loading = useLoading()
    const toast = useToast()
    const modal = useModal()

    const [step,setStep] = useState(1)

    const {appState:{currentDevice,location},addDevice,updateAppState} = useAppStore()

    const {data} = route.params
    useEffect(()=>{
        navigation.setOptions({
            title:'连接设备'
        })
        console.log(data);

        if(currentDevice ){
            BleUtil.disconnect(currentDevice.id).then(()=>{
                connectDevice()
            })
        }else{
            connectDevice()
        }
    },[])



    const connectDevice = ()=>{
        setStep(2)
       /*
        BleUtil.connect(data.id,(info)=>{
            if(!info.error){
                setStep(3)
                addDevice(data)
                updateAppState({currentDevice:data})
            }
        })
        */
         BleUtil.connectAndPrepare(data.id).then((info)=>{
            if(!info.error){
                setStep(3)
                addDevice(data)
                updateAppState({currentDevice:data})
            }
        }).catch(error=>{
             console.log(error);
             setStep(4)
             let message = error.error === 'timeout' ? '连接超时' : '连接失败'
             toast.show(message)
         })
    }

    const saveDevice = ()=>{

        addDevice(data)
        navigation.popToTop()
        // navigation.goBack()

    }


    return (
        <Container style={styles.container}>
            {
                step === 1 && (
                    <View style={styles.container}>
                        <Text style={{fontSize:22,color:'#333'}}>发现{data.name}卫星终端</Text>
                        <Text style={{fontSize:12,color:'#53687A',marginTop:screen.PIXEL_40}}>开始进行配对</Text>
                        <Image source={Images.add_device}
                               style={{width:screen.scaleSize(475),height:screen.scaleSize(475) * addDeviceScale,marginTop:screen.PIXEL_100}}/>
                    </View>
                )
            }
            {/*连接设备*/}
            {
                step ===2 && (
                    <View style={styles.container}>
                        <Image source={Images.searching}
                               style={{width:screen.scaleSize(600),height:screen.scaleSize(600)}}
                        />
                        <Text style={{fontSize:22,color:'#333',marginTop:screen.PIXEL_80}}>设备配对中</Text>
                        <Text style={{fontSize:12,color:'#53687A',marginTop:screen.PIXEL_40}}>开始进行配对</Text>

                    </View>
                )
            }

            {/*连接设备成功*/}
            {
                step === 3 && (
                    <View style={{flex:1,paddingBottom:screen.PIXEL_100}}>
                        <View style={styles.container}>
                            <Image source={Images.match_success}
                                   style={{width:screen.PIXEL_240,height:screen.PIXEL_240}}
                                   resizeMode={'contain'}
                            />
                            <Text style={{fontSize:17,color:'#333',marginTop:screen.PIXEL_50}}>配对成功</Text>

                            <View style={styles.rowItem}>
                                <Text style={styles.rowItemText}>终端型号:</Text>
                                <Text style={styles.rowItemText}>{data.name}</Text>
                            </View>

                            <View style={styles.rowItem}>
                                <Text style={styles.rowItemText}>终端编号:</Text>
                                <Text style={styles.rowItemText}>{data.id}</Text>
                            </View>

                            {/*
                            <View style={styles.rowItem}>
                                <Text style={styles.rowItemText}>添加时间:</Text>
                                <Text style={styles.rowItemText}>{data.createTime}</Text>
                            </View>
                        */}
                        </View>

                        <LinkButton
                            title={'完成'}
                            onPress={saveDevice}
                        />
                    </View>
                )
            }

            {
                step === 4 && (
                    <View style={{flex:1,paddingBottom:screen.PIXEL_100}}>
                        <View style={styles.container}>
                            <Image source={Images.match_failed}
                                   style={{width:screen.PIXEL_240,height:screen.PIXEL_240}}
                                   resizeMode={'contain'}
                            />
                            <Text style={{fontSize:17,color:'#333',marginTop:screen.PIXEL_50}}>配对失败</Text>

                        </View>

                        <LinkButton
                            title={'返回'}
                            onPress={()=>{
                                navigation.goBack()
                            }}
                        />
                    </View>
                )
            }
        </Container>
    )
}
export default ConnectDevice
const styles = StyleSheet.create({
    container:{
        flex: 1, justifyContent: 'center', alignItems: 'center'
    },
    itemContainer:{
        flex:1,backgroundColor:'#fff',borderRadius:screen.PIXEL_20,
        justifyContent: 'center', alignItems: 'center',height:screen.PIXEL_320
    },
    rowItem:{
        flexDirection:'row',justifyContent: 'space-between',alignItems:'center',marginBottom:5
    },
    rowItemText:{
        color:'#333',fontSize:13
    }
})
